<template>
	<view class="gy-evaluate-count">
		<view class="gy-evaluate-count-rate">{{ props.favorableRate }}</view>
		<view class="gy-evaluate-count-explain">
			<view class="gy-evaluate-count-name">好评率</view>
			<view class="gy-evaluate-count-params">
				<text>{{ props.serviceLabel }}{{ props.serviceCount }}</text>
				<text>共{{ props.evaluateCount }}人评价</text>
			</view>
		</view>
		<view class="gy-evaluate-count-image">
			<com-image src="f01f0466a4822ff1b560d20f0ac1138713a2e22efb4f330146e38f1b48e691e3.png" />
		</view>
	</view>
</template>

<script lang="ts" setup>

    const props = defineProps({
        favorableRate: {
        	type: String,
        	default: "0%"
        },
		serviceLabel: {
			type: String,
			default: "服务人数"
		},
		serviceCount: {
			type: Number,
			default: 0
		},
		evaluateCount: {
			type: Number,
			default: 0
		}
    });

</script>

<style lang="scss" scoped>
	.gy-evaluate-count{
		padding: var(--gy-gap);
	    @include flex-start-center;
	    position: relative;
		background-color: #fdf8f3;
		border-radius: var(--gy-border-radius-large);
	    .gy-evaluate-count-rate{
	        font-size: 70rpx;
	        color: #FF8E12;
	        font-weight: bold;
	        line-height: 80rpx;
	    }
	    .gy-evaluate-count-explain{
	        flex: 1;
	        height: 80rpx;
	        @include flex-between;
	        flex-direction: column;
	        padding: 0 var(--gy-gap);
	        .gy-evaluate-count-name{
	            @include text-ellipsis(1);
	            line-height: var(--gy-font-size-medium);
	        }
	        .gy-evaluate-count-params{
	            font-size: var(--gy-font-size-small);
	            color: var(--gy-text-color-secondary);
	            text+text{
	                margin-left: var(--gy-gap);
	            }
	        }
	    }
	    .gy-evaluate-count-image{
	        position: absolute;
	        top: 0rpx;
	        right: 20rpx;
	        width: 140rpx;
	        height: 140rpx;
	    }
	}
</style>
